<!-- 设备管理-设备列表页面 -->
<template>
  <div>
    <px-tabs v-model="activeWater" class="equipment-tabs" style="padding-left: 24px; background: white" @tab-click="getcharts">
      <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
        <template #label>
          <p class="pane-bottom">{{ item.label }}</p>
          <p class="pane-line" />
        </template>
      </px-tab-pane>
    </px-tabs>
    <div style="padding: 20px; background: white">
      <px-form v-show="showSearch" ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
        <px-form-item v-if="activeWater == 'waste'" style="width: 310px !important" :label="activeWater == 'pure' ? '水量名称' : '单元名称'">
          <px-select v-model="queryParams.jobIdList" placeholder="请选择" clearable style="width: 240px" filterable>
            <px-option v-for="dict in firstSpcList" :key="dict.id" :label="dict.indicatorName" :value="dict.jobId" />
          </px-select>
        </px-form-item>
        <px-form-item v-else style="width: 310px !important" label="水量名称">
          <!-- <px-select v-model="queryParams.jobIdList" placeholder="请选择" clearable style="width: 240px" filterable>
            <px-option v-for="dict in twoSpcList" :key="dict.id" :label="dict.indicatorName" :value="dict.jobId" />
          </px-select> -->
          <px-tree-select
            v-model="queryParams.jobIdList"
            clearable
            style="width: 100%"
            placeholder="请选择"
            :props="defaultProps"
            :data="twoSpcList"
          />
        </px-form-item>
        <px-form-item label="时间日期" style="width: 440px !important">
          <px-date-picker
            v-model="dateRange"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
          />
        </px-form-item>
        <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
        <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
        <p style="float: right; margin-top: 5px">
          <!-- <span style="color: #3b82f6">今日抄表[{{ Statusvalue.confirmStatus }}] </span> -->
          <span
            ><span style="font-weight: 600">{{ tabPaneList.filter(item => item.name == activeWater)[0].label }} </span>OOS
            <span style="color: #3b82f6">{{ Statusvalu?.totalOosCount ? Statusvalu.totalOosCount : "-" }}个</span> OOW
            <span style="color: #3b82f6">{{ Statusvalu?.totalOowCount ? Statusvalu.totalOowCount : "-" }}个</span>OOC
            <span style="color: #3b82f6">{{ Statusvalu?.totalOocCount ? Statusvalu.totalOocCount : "-" }}个</span>
            <!-- <span style="font-weight: 600">平衡异常</span> -->
            <!-- <span style="color: #3b82f6">{{ Statusvalue.balanceWarn ? Statusvalue.balanceWarn : "-" }}个</span> -->
          </span>
        </p>
      </px-form>
      <px-table v-loading="loading" :data="typeList" height="calc(100vh - 259px)" show-overflow-tooltip border>
        <px-table-column :label="activeWater == 'pure' ? '异常水量' : '单元名称'" prop="indicatorName">
          <template #default="scope">
            <span>{{ scope.row.indicatorName ? scope.row.indicatorName : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="异常时间" prop="eventTime">
          <template #default="scope">
            <span>{{ scope.row.eventTime ? scope.row.eventTime.slice(0, 10) : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="异常值" prop="pointValue">
          <template #default="scope">
            <span>{{ scope.row.pointValue ? scope.row.pointValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="异常类型" prop="alarmType">
          <template #default="scope">
            <span>{{ scope.row.alarmType ? scope.row.alarmType : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="原因及处理" prop="spcNote">
          <template #default="scope">
            <span>{{ scope.row.lastSpcNote?.content ? scope.row.lastSpcNote?.content : "-" }}</span>
          </template>
        </px-table-column>

        <px-table-column fixed="right" label="操作" align="center" width="140">
          <template #default="scope">
            <px-button v-if="scope.row.status != 'INVALID'" link type="primary" @click="handleEditor(scope.row)">
              <px-tooltip class="box-item" content="批注" placement="top">
                <px-icon>
                  <EditPen />
                </px-icon> </px-tooltip
            ></px-button>
            <px-button v-if="scope.row.status != 'INVALID'" link type="primary" @click="getcontentList(scope.row.id)">
              <px-tooltip class="box-item" content="批注历史" placement="top">
                <px-icon><Time /></px-icon></px-tooltip
            ></px-button>
          </template>
        </px-table-column>
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        style="margin-bottom: -10px"
        :total="total"
        @pagination="getList"
      />
    </div>
    <px-dialog v-model="contentVisible" draggable clickHideContent title="批注历史" width="956" align-center>
      <px-table v-loading="loading" class="digtable1" :data="contentList" height="250" show-overflow-tooltip border>
        <px-table-column label="Update Time" prop="createTime">
          <template #default="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </px-table-column>
        <px-table-column label="Update user" prop="creator">
          <template #default="scope">
            <span>{{ scope.row.creator }}</span>
          </template>
        </px-table-column>
        <px-table-column label="Content" prop="content">
          <template #default="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </px-table-column>

        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>
      <pagination
        v-show="total2 > 0"
        v-model:page="queryParams2.pageNum"
        v-model:limit="queryParams2.pageSize"
        style="margin-bottom: -10px"
        :total="total2"
        @pagination="getcontentList"
      />
      <!-- <template #footer>
        <span class="dialog-footer">
          <px-button @click="progressVisible = false">取消</px-button>
          <px-button type="primary" @click="addRukudetails()"> 确认 </px-button>
        </span>
      </template> -->
    </px-dialog>
    <px-dialog v-model="contentTextVisible" draggable clickHideContent title="批注" width="677" align-center>
      <px-row class="contentrow">
        <px-col :span="12">
          <span> Time : </span>
          {{ contentvalue.createTime }}
        </px-col>
        <px-col :span="12">
          <span> Indicate Name : </span>
          {{ contentvalue.indicatorName }}
        </px-col>
      </px-row>
      <px-row class="contentrow">
        <px-col :span="12">
          <span> Alarm Type : </span>
          {{ contentvalue.alarmType }}
        </px-col>
        <px-col :span="12">
          <span> Value (ppm) : </span>
          {{ contentvalue.pointValue }}
        </px-col>
      </px-row>
      <px-row class="contentrow">
        <px-col :span="24">
          <span> 批注 :</span>
          <px-input v-model="constenttext" style="margin-top: 16px" :rows="2" type="textarea" placeholder="请输入" />
        </px-col>
      </px-row>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="contentTextVisible = false">取消</px-button>
          <px-button type="primary" @click="addcontent()"> 保存 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup name="Dict" lang="ts">
defineOptions({
  name: "SystemDataDict"
});
import { PxMessage, PxMessageBox } from "px-ui";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import { getToken } from "@/utils/auth";
import { emissionFactorquery } from "@/api/doubleCarbonManage/carbonAccounting";
import {
  balancequerySubmitHistory,
  balancequeryWaterBalanceSpc,
  balancequeryWaterBalanceSPCJobList,
  eventqueryBalanceNameList
} from "@/api/waterBalance";
import { spcqueryList, spcIndicatorquerySpcAnalysisResultList, spcNotequeryList, spcNoteadd } from "@/api/spc";
const detailruleFormRef = ref();
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 1), new Date(2000, 1, 1, 23, 59, 59)];
const dateRange = ref([]);
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
const contentVisible = ref(false);
const contentTextVisible = ref(false);
const defaultProps = {
  children: "children",
  label: "name",
  value: "spcJobId"
};
onMounted(() => {
  if (localStorage.getItem("chukuList")) {
  }

  const end = new Date();
  // end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  dateRange.value = [formatDate(start), formatDate(end)];
  balancequeryWaterBalanceSpc({}).then(res => {
    // console.log(res);
    firstList.value = res;
    console.log(firstList.value);
    spcqueryList({
      pageNum: 1,
      pageSize: 999,
      jobId: firstList.value
    }).then(res => {
      console.log(res);
      firstSpcList.value = res.data;

      // if (activeWater.value == "pure") {
      //   getList();
      // }
    });
  });

  balancequeryWaterBalanceSPCJobList({}).then(res => {
    // console.log(res);
    twoList.value = res;
    console.log(twoList.value);
    spcqueryList({
      pageNum: 1,
      pageSize: 999,
      jobId: twoList.value
    }).then(res => {
      console.log(res);
      if (activeWater.value == "pure") {
        getList();
      }
    });
  });
  eventqueryBalanceNameList({}).then(res => {
    twoSpcList.value = res;
  });
});
const activeWater = ref("pure");
const tabPaneList = [
  {
    label: "水量异常",
    name: "pure"
  },
  {
    label: "平衡异常",
    name: "waste"
  }
];
const getcharts = () => {
  queryParams.value.jobIdList = "";
  setTimeout(() => {
    getList();
  }, 500);
};
const { proxy }: any = getCurrentInstance();

const typeList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const addVisible = ref(false);
const detailVisible = ref(false);
const total = ref(0);
const total2 = ref(0);
// 图片是否上传完，是否可以保存
const buttonTitle = ref("");
const data = reactive({
  liquidList: [],
  rukuList: [],
  transportCompanyList: [],
  receiveCompanyList: [],
  typeIdList: [],
  categoryList: [],
  equipmentTypeList: [],
  positionList: [],
  selectRukuList: [],
  okselectRukuList: [],
  equipmentDeptList: [],
  modelIdList: [],
  form: {},
  photoStatusFlag: false,
  fileStatusFlag: false,
  SourceList: [],
  zUnitList: [],
  mUnitList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    jobIdList: "",
    alarmType: "all",
    startTime: "",
    endTime: ""
  },
  queryParams2: {
    orderByColumn: "",
    isAsc: "",
    planName: "",
    checkTypeCode: "",
    approveStatus: "",
    taskStatus: "",
    createrId: "",
    orderBy: "",
    pageNum: 1,
    pageSize: 10
  },
  headers: {
    Authorization: "Bearer " + getToken().accessToken || ""
  },
  moduleName: "",
  dialogImageUrl: "",
  imageVisible: false,
  contentvalue: {},
  constenttext: "",
  firstList: [],
  twoList: [],
  firstSpcList: [],
  twoSpcList: [],
  contentList: []
});
const {
  contentList,
  firstSpcList,
  twoSpcList,
  firstList,
  twoList,
  constenttext,
  liquidList,
  contentvalue,
  fileStatusFlag,
  SourceList,
  selectRukuList,
  zUnitList,
  mUnitList,
  queryParams,
  form,
  queryParams2,
  rukuList
} = toRefs(data);
const Statusvalu = ref({});
function getList() {
  console.log(queryParams.value, dateRange);
  loading.value = true;

  if (dateRange.value != null) {
    queryParams.value.startTime = dateRange.value[0];
    queryParams.value.endTime = dateRange.value[1];
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
  spcIndicatorquerySpcAnalysisResultList({
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    jobIdList:
      activeWater.value == "waste"
        ? queryParams.value.jobIdList != ""
          ? [queryParams.value.jobIdList]
          : firstList.value
        : queryParams.value.jobIdList != ""
          ? [queryParams.value.jobIdList]
          : twoList.value,
    alarmType: "all",
    startTime: queryParams.value.startTime,
    endTime: queryParams.value.endTime
  })
    .then(res => {
      if (res != null) {
        Statusvalu.value = res;
        typeList.value = res.pageResponse.data;
        total.value = res.pageResponse.total;
        loading.value = false;
      } else {
        typeList.value = [];
        total.value = 0;
        loading.value = false;
      }
    })
    .catch(() => {
      Statusvalu.value = {};
      typeList.value = [];
      total.value = 0;
      loading.value = false;
    });
}
const removechukuList = () => {
  localStorage.removeItem("chukuList");
};
/** 取消按钮 */

/** 表单重置 */
function reset() {
  form.value = {
    id: undefined,
    dictionaryName: undefined,
    dictionaryType: undefined,
    status: "VALID",
    remarks: undefined
  };
  proxy.resetForm("dictRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  // queryParams.value = {
  //   queryDate: new Date().toISOString().split("T")[0],
  //   submitStatus: "全部"
  // };
  // handleQuery();
  const end = new Date();
  // end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  dateRange.value = [formatDate(start), formatDate(end)];
  queryParams.value.jobIdList = "";
  getList();
}

const getcontentList = businessKey => {
  contentVisible.value = true;
  spcNotequeryList({
    pageNum: queryParams2.value.pageNum,
    pageSize: queryParams2.value.pageSize,
    businessKey: businessKey
  }).then(res => {
    console.log(res);
    contentList.value = res.data;
    total2.value = res.total;
  });
};

const addcontent = () => {
  spcNoteadd({
    businessKey: contentvalue.value.id,
    content: constenttext.value
  }).then(res => {
    console.log(res);
    PxMessage({
      message: "批注成功",
      type: "success"
    });
    contentTextVisible.value = false;
  });
};
const handleEditor = row => {
  contentvalue.value = row;
  constenttext.value = "";
  console.log(contentvalue.value);
  contentTextVisible.value = true;
};
</script>
<style scoped lang="scss">
.addEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
  background: white;
}

.editorEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
  background: white;
}

.px-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2002;
  width: 100%;
  height: 50px;
  padding-top: 10px;
  padding-right: 34px;
  text-align: right;
  background: white;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
}

.card-header {
  min-height: 40px;
  padding: 14px 15px 7px !important;
  cursor: pointer;
  user-select: none;
  background: #e7eefb;
}

.card-title {
  float: left;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  color: rgb(0 0 0 / 80%);
}

.card-main {
  float: left;
  margin: -3px 8px 0 5px;
  cursor: pointer;
}

.box-card1 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card2 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card3 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card4 {
  width: calc(100% - 48px);
  height: 261px;
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.demo-form-inline {
  .px-input {
    --px-input-width: calc(100% - 70px);
  }

  .px-form-item {
    width: 100%;
  }

  .px-textarea__inner {
    width: calc(100% - 100px) !important;
  }

  .px-form-item__label {
    font-weight: 400 !important;
  }
}

.form-div {
  padding: 24px;
  padding-bottom: 0;

  .px-row {
    margin-bottom: 16px;
  }
}

.px-icon {
  font-size: 16px !important;
}

:deep(.px-tabs--top .px-tabs__item.is-top.is-active) {
  border: none;

  .pane-bottom {
    line-height: 30px;
    border-bottom: 2px solid #3b82f6;
  }
}

:deep(.px-tabs .px-tabs__item) {
  .pane-bottom {
    line-height: 30px;
  }
}

.pane-line {
  position: absolute;
  top: 12px;
  right: 0;
  height: 15px;
  color: #dcdcdc;
  border-left: 1px solid #dcdcdc;
}

:deep(.custom-form-ui .px-form-item) {
  width: 250px !important;
}

.filename {
  position: absolute;
  bottom: -30px;
  width: 96px;
  overflow: hidden;
  color: rgb(166 167 172);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.px-descriptions__label.px-descriptions__cell.is-bordered-label) {
  width: 166px;
  background: #e7eefb;
  border: 1px solid #dfdfdf;
}

:deep(.px-descriptions__body .px-descriptions__table.is-bordered .px-descriptions__cell) {
  border: 1px solid #dfdfdf;
}

.cell-item {
  text-align: right;
}

:deep(.px-table__header) {
  thead {
    tr {
      background-color: #e7eefb !important;

      th {
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #e7eefb !important;
      }
    }
  }
}

.file-upload-wrap .file-table {
  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #d9e9ff !important;
        }
      }
    }
  }
}

:deep(.px-table--isfixedHeader .px-table__header-wrapper .px-table-fixed-column--right) {
  background-color: #e7eefb !important;
}

.import-bottle {
  .import-bottle-title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-left: 16px;
    margin-bottom: 24px;
    line-height: 1;
    color: #333;
    background-color: #fef5e6;
    border: 1px solid #f7b648;
    border-radius: 6px;

    .download {
      color: #3b82f6;
      cursor: pointer;
    }
  }

  .import-bottle-upload {
    width: 100%;
  }
}
</style>
